<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../jquery/jquery-1.9.1.min.js"></script>
<script src="../jquery/js/jquery-ui-1.10.3.custom.js"></script>
<link href="../jquery/css/cupertino/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<link rel="stylesheet" href="../jquery/themes/base/jquery.ui.all.css">
<script src="../jquery/ui/jquery.ui.core.js"></script>
<script src="../jquery/ui/jquery.ui.widget.js"></script>
<script src="../jquery/ui/jquery.ui.position.js"></script>
<script src="../jquery/ui/jquery.ui.menu.js"></script>
<script src="../jquery/ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="css/demos.css">
<script type="text/javascript">
$(document).ready(function(){
	$("#id-input-add-element").click(function(){
		//动态添加元素
		$("<li><a href='http://www.google.com' rel='google' target='_blank'>谷歌</a></li>").appendTo("div.ulclass>ul");
		$("div.ulclass>ul").append("<li><a href='http://www.microsoft.com' rel='microsoft'>微软</a></li>");
		$("#div-log").html($("#div-log").html()+"<p>"+"动态添加元素"+"</p>");
	});
	//jquery [attribute=value] 属性过滤器，全字符匹配
	$("a[rel='selfViewOpen']").click(function(e){
		//设置元素属性attr
		$(this).attr("target","_self");
		$("#div-log").html($("#div-log").html()+"<p>"+"通过rel='selfViewOpen'属性值过滤元素,设定本页打开连接方式"+"</p>");
	});
	$("#id-input-sel-nohttp").click(function(){
		//JQuery [attribute!=value] 同 not([attr="value"])
		//全字符匹配，取出属性以不包括指定字符串的元素
		//取得不包含 http:// 字符串的并添加一段字符串
		//[href*=value] 属性过滤，模糊匹配
		$("a").not("[href*='http://']").append("<b>---本地链接网站</b>");
		$("#div-log").html($("#div-log").html()+"<p>"+"过滤本地链接"+"</p>");
	});
	$("#id-input-sel-httpstart").click(function(){
		//JQuery [attribute^=value] 取出属性以指定字符串开头的元素
		$("a[href^='http://']").attr("target","_blank").css("background-color","gray");
		$("#div-log").html($("#div-log").html()+"<p>"+"过滤连接开头"+"</p>");
	});
	$("#id-input-sel-httpend").click(function(){
		//JQuery [attribute$=value] 取出属性以指定字符串结尾的元素
		$("a[href$='edu.cn']").css("background-color","red").append("---教育网");
		$("#div-log").html($("#div-log").html()+"<p>"+"过滤连接结尾"+"</p>");
	});
	$("#id-input-sel-multi").click(function(){
		//JQuery [attribute$=value] 取出属性以指定字符串结尾的元素
		$("a[rel='google'][target='_blank']").css("background-color","green").append("---多属性过滤器");
		$("#div-log").html($("#div-log").html()+"<p>"+"过滤连接结尾"+"</p>");
	});
});
</script>
<style type="text/css">
body {
	font:62.5% "Trebuchet MS", sans-serif;
	margin:64px;
}
#h2-caption {
	font:20px "Trebuchet MS", sans-serif;
}
p {
	font:16px "Trebuchet MS", sans-serif;
}
.demoHeaders {
	margin-top:2em;
}
form {
	font:16px "Trebuchet MS", sans-serif;
}
#div-log {
	font:13.5px "Trebuchet MS", sans-serif;
}
</style>
<style>
.ulclass{
	background-color:#E8E8E8;
	font-size: 16px;
}
</style>
<title>超实用的jQuery代码段</title>
</head>
<body>
	<h2 id="h2-caption">超实用的jQuery代码段 - jQuery如何使用属性过滤器</h2>
	<hr><br>
	<input type="button" id="id-input-add-element" value="动态添加元素">
	<input type="button" id="id-input-sel-nohttp" value="过滤本地链接">
	<input type="button" id="id-input-sel-httpstart" value="过滤链接开头">
	<input type="button" id="id-input-sel-httpend" value="过滤链接结尾">
	<input type="button" id="id-input-sel-multi" value="多属性过滤器">
	<div class="ulclass">
		<span>网站导航</span><br/>
		<ul>
			<li><a href="http://www.baidu.com" rel="selfViewOpen">百度</a></li>
			<li><a href="http://www.pku.edu.cn">北京大学</a></li>
			<li><a href="#">No http://</a></li>
		</ul>
	</div>
	<br><hr>
	<div id="div-log">
		<p>日志记录：</p>
	</div>
</body>
</html>